<template>
	<view class="detailBox">
		<view class="mart-30">
			<view class="commit-title">钢丝绳信息</view>
			<view class="topContent readBox" v-if="thisData">
				<u-read-more ref="uReadMore" :showHeight="200" closeText="查看更多" :toggle="true">
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">钢丝绳编码</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.code}}</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">钢丝绳名称</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.name}}</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">规格型号</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.guiGe}}</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">直径</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.diameter}} mm</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">公称捻距</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.nianJu}} mm</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">长度</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.lengthNum}} m</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
				
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">绳子条数</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.installLengthNum}} 根</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">抗拉强度</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.mpaName}}</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">表面状态</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.surfaceStatusName}}</text>
						</u-col>
					</u-row>
					
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">捻制类型</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.twistingTypeName}}</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">矿山</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.department_Name}}</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">安装长度</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.installLengthNum}} m</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">安装地点</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.installAddressName }}</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">安装日期</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.installDate | ymd}}</text>
						</u-col>
					</u-row>
					
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">提升机类型</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.hoisterName }}</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">提升机用途</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.hoisterUsageName }}</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">钢丝绳类型</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.wireropeTypeName}}</text>
						</u-col>
					</u-row>

					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">备注</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.remark}}</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">供应商</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.supplierName}}</text>
						</u-col>
					</u-row>
					<u-line class="marb-20"></u-line>
					<u-row gutter="0" class="marb-20">
						<u-col span="4" textAlign="center">
							<text class="label-name">制造商</text>
						</u-col>
						<u-col span="6">
							<text class="label-name">{{thisData.producerName}}</text>
						</u-col>
					</u-row>
					
					
					
				</u-read-more>
			</view>
		</view>
		<view class="mart-30">
			<u-tabs :activeStyle="{color:'#409EFF'}" :current="current" :list="tabList" @click="tabClick"></u-tabs>
			<view>
				<warehousing ref="warehousingRef" v-show="current==0"></warehousing>
				<spareRope ref="spareRopeRef" v-show="current==1"></spareRope>
				<installInfo ref="installInfoRef"  v-show="current==2"></installInfo>
				<inUse ref="inUseRef" v-show="current==3"></inUse>
				<inUse2 ref="inUse2Ref" v-show="current==4"></inUse2>
				<delInfo ref="delInfoRef" v-show="current==5"></delInfo>
			</view>
		</view>
		
	</view>
</template>

<script>
	import warehousing from '@/pages/ropeArchives/warehousing.vue'
	import spareRope from '@/pages/ropeArchives/spareRope.vue'
	import installInfo from '@/pages/ropeArchives/installInfo.vue'
	import inUse from '@/pages/ropeArchives/inUse.vue'
	import inUse2 from '@/pages/ropeArchives/inUse2.vue'
	import delInfo from '@/pages/ropeArchives/delInfo.vue'
	export default {
		components:{
			warehousing,
			spareRope,
			installInfo,
			inUse,
			inUse2,
			delInfo,
		},
		data() {
			return {
				thisID: null,
				thisData: {
					stockWireropeKeepModelList:[],
					installModel:{}
				},
				current:0,
				tabList: [{name:'入库信息'}, {name:'备绳维保'},{name:'安装信息'},{name:'在用维保'},{name:'在用检测'},{name:'作废信息'}]
			}
		},
		onLoad(options) {
			let that = this;
			// #ifdef APP-NVUE
			const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			// #endif

			// #ifndef APP-NVUE
			const eventChannel = this.getOpenerEventChannel();
			// #endif
			eventChannel.on('editData', function(data) {
				that.init(data.data);
			})
		},
		beforeDestroy() {

		},
		methods: {
			tabClick(item){
				let index=item.index;
				this.current=index;
				let refNames=['warehousingRef','spareRopeRef','installInfoRef','inUseRef','inUse2Ref','delInfoRef'];
				this.$refs[refNames[index]].init(this.thisData);	
			},
			init(data) {
				this.thisID = data.usingWireropeID;
				this.$app.CallApi(this.$app.api.UsingWirerope.GetByID(this.thisID), {
					success: res => {
						this.thisData = res;
						this.$refs['warehousingRef'].init(this.thisData);
					}
				})
				return;
			},
		}
	}
</script>

<style>

</style>